<template>
	<view class="content">

    <page-home v-show="tabbarSelected === 'home'"></page-home>
    <PageAI v-show="tabbarSelected === 'ai'"></PageAI>
    <PageFind v-show="tabbarSelected === 'find'"></PageFind>
    <PageMessage v-show="tabbarSelected === 'message'"></PageMessage>
    <page-mine v-show="tabbarSelected === 'mine'"></page-mine>

    <page-home-course v-show="tabbarSelected === 'homeCourse'"></page-home-course>


   <body-tabbar ref="bodyTabbar" :selected="tabbarSelected"
                @changeTabbar="changeTabbar"></body-tabbar>
	</view>
</template>

<script>
  import bodyTabbar from './components/bodyTabbar.vue'
  import PageHome from "@/pages/body/pageComponents/pageHome.vue";
  import PageMine from "@/pages/body/pageComponents/pageMine.vue";
  import PageAI from "@/pages/body/pageComponents/pageAI.vue";
  import PageFind from "@/pages/body/pageComponents/pageFind.vue";
  import PageMessage from "@/pages/body/pageComponents/pageMessage.vue";
  import PageHomeCourse from "./pageComponents/pageHomeCourse.vue";

	export default {
	components: {
    PageMine,
    PageAI,
    PageFind,
    PageHome,
    PageMessage,
		bodyTabbar,
    PageHomeCourse
	  },
		data() {
			return {
        mineInfo: {},
        tabbarSelected: 'home',
			}
		},
    // 分享给好友
    onShareAppMessage() {
      return {
        path: '/pages/into/into',
        title: '',
      }
    },
		onLoad(query) {
      //页面传参tabbarSelected=all
      if (query && query.tabbarSelected) {
        this.tabbarSelected = query.tabbarSelected;
        this.changeTabbar(query.tabbarSelected);
      }
      this.changeTabbar("home");
		},
    mounted() {
    },
		methods: {

      changeTabbar(code) {
        this.tabbarSelected = code;
        this.$forceUpdate();
        this.$kt.event.emit('changeTabbar', code);
        console.log(code)
      }
		},

	}
</script>

<style lang="scss" scoped>
  .back {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #000000;
    top:0;
    left:0;
  }

  .show{
    opacity: 1;
    z-index: 10;
  }

  .hide{
    opacity: 0;
    z-index: -1;
  }

</style>
